<template>
	<div>
		<!--顶部导航-->
	  	<!--<top-nav title="我的" ></top-nav>-->
	  	<div class="mine-top" :style="{backgroundImage: 'url(' + info.user_img + ')' }" >
	  		<img :src="info.user_himg ? info.user_himg : pic" alt=""/>
	  		<p class="mine-name">{{info.user_nickname}}</p>
	  		<p class="mine-id">ID {{info.user_userNum}}</p>
	  		<p class="mine-autograph">{{info.user_desc}}</p>
	  	</div>
	  	<ul class="mine-list">
	  		<li @click="handleComment">
	  			<div class="list-left" >
	  				<img src="../../assets/images/mine/mine-post.png" alt="" />
	  				<p>我的帖子</p>
	  			</div>
	  			<div class="list-right">
	  				<span v-if="info.num!=0">{{info.num}}</span>
	  				<img src="../../assets/images/mine/mine-icon.png"/>
	  			</div>
	  		</li>
	  		<li @click="handlePost">
	  			<div class="list-left">
	  				<img src="../../assets/images/mine/mine-comment.png" alt="" />
	  				<p>我的评论</p>
	  			</div>
	  			<div class="list-right">
	  				<span></span>
	  				<img src="../../assets/images/mine/mine-icon.png"/>
	  			</div>
	  		</li>
	  		<li @click="handleFollow">
	  			<div class="list-left">
	  				<img src="../../assets/images/mine/mine-follow.png" alt="" />
	  				<p>我的关注</p>
	  			</div>
	  			<div class="list-right">
	  				<span></span>
	  				<img src="../../assets/images/mine/mine-icon.png"/>
	  			</div>
	  		</li>
	  		<li @click="handleDraft">
	  			<div class="list-left">
	  				<img src="../../assets/images/mine/mine-draft.png" alt="" />
	  				<p>我的草稿</p>
	  			</div>
	  			<div class="list-right">
	  				<span></span>
	  				<img src="../../assets/images/mine/mine-icon.png"/>
	  			</div>
	  		</li>
	  		<li @click="handleFeedback">
	  			<div class="list-left">
	  				<img src="../../assets/images/mine/mine-feedback.png" alt="" />
	  				<p>帮助和反馈</p>
	  			</div>
	  			<div class="list-right">
	  				<span></span>
	  				<img src="../../assets/images/mine/mine-icon.png"/>
	  			</div>
	  		</li>
	  		<li @click="handleSet">
	  			<div class="list-left">
	  				<img src="../../assets/images/mine/mine-install.png" alt="" />
	  				<p>设置</p>
	  			</div>
	  			<div class="list-right">
	  				<span></span>
	  				<img src="../../assets/images/mine/mine-icon.png"/>
	  			</div>
	  		</li>
	  	</ul>
	</div>
</template>

<script>
	import TopNav from '../../components/commons/top-nav';
	import axios from "axios";
	import user from '../../utils/isLogin';
	import pic from '../../assets/default.jpg';
	
	export default{
		data(){
			return{
				info:{},
				pic : pic,
				getimg :'',
				isClick:true
			}
		},
		created(){
			let plusReady = ()=>{
				var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
				if(userInfo == undefined || userInfo == null){
					return;
				}else{
					var userid = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
					axios.post(user.src+ '/index/user/get_user_information' , {
						userid: userid,
					})
					.then( (res) =>{
						this.info = res.data.data;
					})
					.catch( (error) =>{
					   
					});
					setInterval(()=>{
						axios.post(user.src+ '/index/user/get_user_information' , {
							userid: userid,
						})
						.then( (res) =>{
							this.info = res.data.data;
						})
						.catch( (error) =>{
						   
						});
					},1000)
				}
			}
			if (window.plus) {
		      plusReady();
		    } else {
		      document.addEventListener("plusready", plusReady, false);
		    }
		},
		components:{
			TopNav
		},
		methods:{
			handleComment(){
				if(this.isClick){
					this.isClick = false;
					var comments = plus.webview.create('comment.html','comment',{scrollIndicator:'none'},{});
					comments.addEventListener("loaded", ()=> {
					    comments.show('pop-in', 300);
					    this.isClick = true;
					    comments = null;
					}, false);
				}
			},
			handlePost () {
				if(this.isClick){
					this.isClick = false;
					var post = plus.webview.create('post.html','post',{scrollIndicator:'none'},{});
					post.addEventListener("loaded", ()=> {
					    post.show('pop-in', 300);
					    this.isClick = true;
					    post = null;
					}, false);
				}
			},
			handleFollow () {
				if(this.isClick){
					this.isClick = false;
					var follow = plus.webview.create('follow.html','follow',{scrollIndicator:'none'},{});
					follow.addEventListener("loaded", ()=>{
					    follow.show('pop-in', 300);
					    this.isClick = true;
					    follow = null;
					}, false);
				}
			},
			handleDraft () {
				if(this.isClick){
					this.isClick = false;
					var draft = plus.webview.create('draft.html','draft',{scrollIndicator:'none'},{});
					draft.addEventListener("loaded", ()=>{
					    draft.show('pop-in', 300);
					    this.isClick = true;
					    draft = null;
					}, false)
				}
			},
			handleFeedback () {
				if(this.isClick){
					this.isClick = false;
					var feedback = plus.webview.create('feedback.html','feedback',{scrollIndicator:'none'},{});
					feedback.addEventListener("loaded", ()=>{
					    feedback.show('pop-in', 300);
					    this.isClick = true;
					    feedback = null;
					}, false);
				}
			},
			handleSet () {
				if(this.isClick){
					this.isClick = false;
					var set = plus.webview.create('set.html','set',{scrollIndicator:'none'},{});
					set.addEventListener("loaded", ()=>{
					    set.show('pop-in', 300);
					    this.isClick = true;
					    set = null;
					}, false);
				}
			}
		}
	}
</script>

<style lang="less">
	html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		/*box-shadow: 0px 0px 8px 1px #999;*/
	}
	*{
		margin: 0;
		padding: 0;
	}

	ul,li{
		list-style: none;
	}
	.mine-top{
		overflow: hidden;
		padding-left: 32px;
		height: 488px;
		background:@default-blue;
		background-size: cover;

		img{
			border: 0;
			display: block;
			width: 164px;
			height: 164px;
			border:1px solid #fff;
			border-radius: 50%;
			margin-top: 112px;
		}
		.mine-name{
			margin-left: 10px;
			line-height: 40px;
			font-size: 40px;
			margin-top: 17px;
			color: #F5F5F5;
		}
		.mine-id{
			line-height: 18px;
			font-size: 18px;
			color: #462715;
			margin-top: 20px;
			margin-left: 10px;
			color: #F5F5F5;
		}
		.mine-autograph{
			margin-top: 30px;
			padding-left: 15px;
			padding-right: 50px;
			line-height: 36px;
			font-size: 26px;
			color: #1d2820;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			color: #F5F5F5;
		}
	}
	.mine-list{
		overflow: hidden;
		padding: 0 56px 0 32px;
		li{
			height: 114px;
			border-bottom: 0.1rem solid #f6f6f6;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.list-left img{
			float: left;
			display:block;
			width: 37px;
			height: 37px;
			margin-top: 53px;
			margin-right: 16px;
		}
		.list-left p{
			float: left;
			font-size: 30px;
			line-height: 148px;
			color: #353535;
		}
		.list-right{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.list-right span{
			float: left;
			line-height: 148px;
			font-size: 24px;
			color: #343434;
		}
		.list-right img{
			float: left;
			display:block;
			width: 16px;
			height: 26px;
			/*margin-top: 60px;*/
			margin-left: 20px;
		}
	}
</style>